<template>
	<view class="uniui-home">
		<EmpireSearch ref="searchBar"></EmpireSearch>
		<scroll-view :scroll-y="true" :show-scrollbar="false" :style="mainStyle">
			<view class="box-padding swiper-wrap">
				<uni-swiper-dot mode="round" :info="swiperRanges" :current="currentSwiperKey">
					<swiper indicator-dots :autoplay="true" :current="currentSwiperKey" @change="handleSwiperChange">
						<swiper-item v-for="(url, key) in swiperRanges" :key="key">
							<image class="swiper-image" :src="url" webp></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<view class="swiper-wrap__label">
					<text>正品保障</text>
					<text>品牌直供</text>
					<text>售后无忧</text>
					<text>教练推荐</text>
				</view>
			</view>
			<view class="box-padding__lr">
				<EmpireCard
					title="新品上市"
					:show-all="true"
					to="/pages/home/products"
					:body-style="{ backgroundColor: '#fff', padding: '30rpx' }"
				>
					<view :style="{ display: 'grid' }">
						<EmpireList :list="newProducts"></EmpireList>
					</view>
					<view class="empire-card__reload" @click="handleReload">
						<uni-icons type="loop" size="15" color="#1BA4F0"></uni-icons>
						<text :style="{ 'margin-left': '8rpx' }">换一批</text>
					</view>
				</EmpireCard>
			</view>
			<view class="box-padding__lr">
				<EmpireCard
					title="限时秒杀"
					:body-style="{ backgroundColor: '#fff', padding: '30rpx' }"
					:show-all="true"
					to="/pages/home/products"
				>
					<template #marker>
						<uni-countdown
							background-color="#ee0c0c"
							color="#fff"
							splitor-color="#ee0c0c"
							:hour="48"
							:show-day="false"
						/>
					</template>
					<view class="empire-card__body">
						<EmpireImageVertical
							src="/static/home/4.png"
							title="肌肉科技白金支链氨基酸..."
							to="/pages/category/product-detail?uid="
						>
							<EmpirePrice :discount="199"></EmpirePrice>
							<template #description>
								<text>1223人已抢</text>
							</template>
						</EmpireImageVertical>
						<EmpireImageVertical
							src="/static/home/5.png"
							title="肌肉科技白金支链氨基酸..."
							to="/pages/category/product-detail?uid="
						>
							<EmpirePrice :discount="199"></EmpirePrice>
							<template #description>
								<text>剩余100件</text>
							</template>
						</EmpireImageVertical>
						<EmpireImageVertical
							src="/static/home/6.png"
							title="肌肉科技白金支链氨基酸..."
							to="/pages/category/product-detail?uid="
						>
							<EmpirePrice :discount="199"></EmpirePrice>
							<template #description>
								<text>剩余200件</text>
							</template>
						</EmpireImageVertical>
					</view>
				</EmpireCard>
			</view>
			<view class="advert-container box-padding__lr">
				<image class="advert-image" src="/static/home/advert.png"></image>
			</view>
			<view class="box-padding__lr">
				<EmpireCard title="金牌推荐" :show-all="true" to="/pages/home/products">
					<EmpireCard
						divider="solid"
						:body-style="{ padding: '30rpx 0 0' }"
						backgroundColor="#fff"
						:custom-style="{ marginBottom: '24rpx', padding: '30rpx', borderRadius: '24rpx' }"
					>
						<template #title>
							<EmpireAvatar src="/static/home/tx1.png" name="王哲" title="三届健美大赛冠军">
								<button class="watch-btn" type="primary" plain>
									<uni-icons type="plusempty" size="16" color="#1BA4F0"></uni-icons>
									<text :style="{ marginLeft: '8rpx' }">关注</text>
								</button>
							</EmpireAvatar>
						</template>
						<EmpireImageHorizontal
							width="180rpx"
							height="180rpx"
							src="/static/home/5.png"
							title="YEAA纯享乳清蛋白粉25磅"
							grid-template-rows="2fr 1fr 1fr 1fr"
							grid-template-columns="1fr 2fr"
							to="/pages/category/product-detail"
						>
							<template #subTitle>
								<text>销量：12621</text>
								<text class="box-mg__left">好评：12589</text>
							</template>
							<EmpirePrice :discount="199"></EmpirePrice>
							<template #description class="empire-mall__flex">
								<text>推荐指数：</text>
								<uni-rate :readonly="true" value="5" size="12"></uni-rate>
							</template>
						</EmpireImageHorizontal>
					</EmpireCard>
					<EmpireCard
						divider="solid"
						backgroundColor="#fff"
						:body-style="{ padding: '30rpx 0 0' }"
						:custom-style="{ marginBottom: '24rpx', padding: '30rpx', borderRadius: '24rpx' }"
					>
						<template #title>
							<EmpireAvatar src="/static/home/tx2.png" name="王哲" title="三届健美大赛冠军">
								<button class="watch-btn" type="primary" plain>
									<uni-icons type="plusempty" size="16" color="#1BA4F0"></uni-icons>
									<text :style="{ marginLeft: '8rpx' }">关注</text>
								</button>
							</EmpireAvatar>
						</template>
						<EmpireImageHorizontal
							width="180rpx"
							height="180rpx"
							src="/static/home/2.png"
							title="YEAA纯享乳清蛋白粉25磅"
							grid-template-rows="2fr 1fr 1fr 1fr"
							grid-template-columns="1fr 2fr"
							to="/pages/category/product-detail"
						>
							<template #subTitle>
								<text>销量：12621</text>
								<text class="box-mg__left">好评：12589</text>
							</template>
							<EmpirePrice :discount="199"></EmpirePrice>
							<template #description class="empire-mall__flex">
								<text>推荐指数：</text>
								<uni-rate :readonly="true" value="5" size="12"></uni-rate>
							</template>
						</EmpireImageHorizontal>
					</EmpireCard>
					<EmpireCard
						divider="solid"
						backgroundColor="#fff"
						:custom-style="{ padding: '30rpx', borderRadius: '24rpx' }"
						:body-style="{ padding: '30rpx 0 0', borderRadius: '0' }"
					>
						<template #title>
							<EmpireAvatar src="/static/home/tx1.png" name="王哲" title="三届健美大赛冠军">
								<button class="watch-btn" type="primary" plain>
									<uni-icons type="plusempty" size="16" color="#1BA4F0"></uni-icons>
									<text :style="{ marginLeft: '8rpx' }">关注</text>
								</button>
							</EmpireAvatar>
						</template>
						<EmpireImageHorizontal
							width="180rpx"
							height="180rpx"
							src="/static/home/3.png"
							title="YEAA纯享乳清蛋白粉25磅"
							grid-template-rows="2fr 1fr 1fr 1fr"
							grid-template-columns="1fr 2fr"
							to="/pages/category/product-detail"
						>
							<template #subTitle>
								<text>销量：12621</text>
								<text class="box-mg__left">好评：12589</text>
							</template>
							<EmpirePrice :discount="199"></EmpirePrice>
							<template #description class="empire-mall__flex">
								<text>推荐指数：</text>
								<uni-rate :readonly="true" value="5" size="12"></uni-rate>
							</template>
						</EmpireImageHorizontal>
					</EmpireCard>
				</EmpireCard>
			</view>
			<view class="box-mg__tb box-padding__lr">
				<EmpireHeader title="品牌推荐"></EmpireHeader>
				<EmpireGrid
					:loading="loading"
					:completed="complate"
					:list="brandList"
					@click-load-more="handleLoadMore"
				></EmpireGrid>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted, shallowReactive, inject } from 'vue';
import EmpireSearch from '@/components/empire-search.vue';
import EmpireCard from '@/components/empire-card';
import EmpireHeader from '@/components/empire-card/header.vue';
import EmpireImageVertical from '@/components/empire-image/empire-image-vertical.vue';
import EmpireImageHorizontal from '@/components/empire-image/empire-image-horizontal.vue';
import EmpireAvatar from '@/components/empire-avatar.vue';
import EmpireGrid from '@/components/empire-grid.vue';
import EmpireList from '@/components/empire-list.vue';
import EmpirePrice from '@/components/empire-price.vue';
import { product as api } from '@/api/api.js';

const _ = inject('lodash');
const searchBar = ref();
const loading = ref(false);
const complate = ref(false);
const mainStyle = shallowReactive({
	position: 'absolute',
	top: 0
});
const currentSwiperKey = ref(0);
const swiperRanges = ref([
	'/static/pinpaitemai.png',
	'/static/pinpaitemai.png',
	'/static/pinpaitemai.png',
	'/static/pinpaitemai.png'
]);
const newProducts = ref([]);
const brandList = ref([]);
const counter = ref(1);
const params = shallowReactive({
	page: 1,
	size: 20
});

function handleSwiperChange({ detail }) {
	currentSwiperKey.value = detail.current;
}

onMounted(() => {
	uni
		.createSelectorQuery()
		.in(searchBar.value)
		.select('.search-wrap')
		.boundingClientRect((node) => {
			mainStyle.top = `${node.height}px`;
		})
		.exec();
	init();
});
function handleReload() {
	counter.value++;
	initNewProductList();
}
function init() {
	initNewProductList();
	initProductList();
}
function initNewProductList() {
	api.getNewProductList({ page: counter.value, size: 3 }).then(({ data: result }) => {
		const { success, data } = result || {};
		if (success) {
			newProducts.value = data;
		}
	});
}

function initProductList() {
	loading.value = true;
	api
		.getProductList(params)
		.then(({ data: result }) => {
			loading.value = false;
			const { success, data } = result || {};
			if (success) {
				if (data.length) {
					brandList.value = brandList.value.concat(data);
				} else {
					complate.value = true;
				}
			}
		})
		.catch(() => {
			loading.value = false;
		});
}
function handleLoadMore() {
	if (!complate.value) {
		params.page += 1;
		initProductList();
	}
}
</script>

<style lang="scss" scoped>
.search-wrap {
	position: fixed;
	top: 0;
	z-index: 99;
	width: 100%;
	height: 152rpx;
}
.swiper-wrap {
	&__label {
		display: flex;
		justify-content: space-around;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #8c8c8c;
	}
}

.swiper-image {
	width: 100%;
	height: 100%;
}
.empire-card__body {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30rpx;
}
.empire-card__reload {
	width: 100%;
	margin-top: 24rpx;
	color: #1ba4f0;
	text-align: center;
	font-size: 30rpx;
}
.advert-container {
	width: calc(100% - 40rpx);
	height: 220rpx;
	margin: 20rpx 0;
}
.advert-image {
	width: 100%;
	height: 100%;
}
.watch-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160rpx;
	height: 60rpx;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
	border-color: #1ba4f0 !important;
	border-radius: 44rpx;
	color: #1ba4f0 !important;
	font-size: 30rpx;
}
</style>
